const path = require('path');
const Webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: { // 入口配置
        index: path.join(__dirname, './src/index.js') // 定义入口文件路径
    },
    devServer: {
        hot: true, //热更新，保存，浏览器自动刷新
        open: true,
        port: 9876,
        contentBase: './dist'
    },
    output: { // 出口配置
        path: path.resolve(__dirname, 'dist'), // 定义出口文件路径
        filename: '[name].js' // 名字为入口定义的文件名index，同时生成6位哈希值
    },
    module: { // loaders配置
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'cache-loader'
                    },
                    {
                        loader: 'thread-loader'
                    },
                    {
                        loader: 'vue-loader',
                        options: {
                            compilerOptions: {
                                preserveWhitespace: false
                            }
                        }
                    }
                ]
            },
            {
                test: /\.html$/, // html解析
                use: {
                    loader: 'html-loader',
                    options: {}
                }
            },
            {
                test: /\.jsx?$/,
                exclude: path.resolve(__dirname, 'node_modules'), //编译时，不需要编译哪些文件
                use: {
                    loader: 'babel-loader', // 把ES6转ES5
                }
            },
            {
                test: /\.scss$/,
                use: [
                    process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader,
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        // Interprets CSS
                        loader: "css-loader",
                        options: {
                            importLoaders: 2
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader' // 将 Sass 编译成 CSS
                    },
                ]
            },
        ]
    },
    plugins: [ // 插件的配置
        new CleanWebpackPlugin(),
        // Where the compiled SASS is saved to
        new MiniCssExtractPlugin({
            filename: 'index.css',
            allChunks: true,
        }),
        new VueLoaderPlugin(),
        new Webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({ // 生成的html自动引入生成的js
            chunks: ['index'],
            filename: 'index.html', // 输出的文件名
            template: './index.html',
            minify: {
                removeComments: true, // 去掉注释
                collapseWhitespace: true, // 压缩
                collapseInlineTagWhitespace: true, // 去掉行级元素的间隙
                removeAttributeQuotes: true // 去掉引号
            }
        }),
    ],
    optimization: {
        minimizer: [
          // 有时候webpack会默认优化z-index值，设置默认不优化
          new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
              safe: true
            }
          })
        ]
      },
}